*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.px2rem(@name, @px) {
    @{name}: @px / 108 * 1rem;
}
.txh {
    display: flex;
    display: -webkit-flex;
}





.main{
    background: #f3f2f2;
   .txh();
   position: absolute;
   left: 0;
   .px2rem(top,120);
   width: 100%;
   justify-content: center;
   flex-direction: column;
   .headers{
           .px2rem(height,106);
           background: #e4e4e4;
       
       ul{
           .txh();
           .px2rem(height,98);
           flex-direction: row;
           li{
               flex: 1;
               .px2rem(line-height,98);
               color: #6c6e7c;
               text-align: center;
               .px2rem(font-size,50);
           }
          
       }
   }
   
  .headers .nav li.curr {
                background: #FD7F82;
                color: white;
                border-bottom: 7px solid #ff6666;
            }
            .main section {
                display: none;
            }
            .main section.curr {
                display: block;
            } 
   
   
   .section{
       .txh();
       width: 90%;
       flex-direction: row;
       margin: 35px auto;
       
  
       #container{
           .txh();
           ul{
               .txh();
               flex: 1;
               flex-direction: column;
               li{
                    .px2rem(margin-bottom,30);
                   img{
                       width: 100%;
                   }
                   p{
                       position: relative;
                       width: 100%;
                       .px2rem(height,94);
                       .px2rem(margin-top,-94);
                       .px2rem(line-height,94);
                       text-align: center;
                       color: white;
                       background: rgba(0,0,0,0.4);
                       .px2rem(font-size,30);
                       font-weight: 800;
                   }
               }
           }
           ul:nth-child(2){
               .px2rem(margin-left,20);
               
           }
       }
   }
}

